<template>
	<view >
	<!-- 状态栏 -->
	<view class="status" :style="{'height': this.$store.state.statusHight + 'px' }">
	</view>
	<!-- 搜索 -->
	<view class="search">
			<u-search v-model="searchkey" shape="square" @custom="searchData" @search="searchData" :action-style="{'color': '#fff'}"></u-search>
	</view>
	<!-- tab选项卡 -->
	<view class="tabs">
		<u-tabs active-color="#b22726" :list="tabList" :is-scroll="false" :current="current" @change="tabschange"></u-tabs>
	</view>
	<!-- 瀑布流布局 -->
	<!-- <view class="water_content" :style="{'height': this.$store.state.screenHeight - 100 + 'px'}"> -->
		<scroll-view scroll-y="true" :style="{'height': this.$store.state.screenHeight - 46 + 'px'}" @scroll="changeScrollTop" :scroll-top="scrollTop" @scrolltolower="getMore">
	<view class="wrap">
		<!-- 数据列表 -->
		<view class="" v-show="(!this.isSearch)">
			<travel :recommendList="list"  :key="current"></travel>
			<u-empty mode="list" text="数据为空" v-show="this.list.length == 0" marginTop="240"></u-empty>
		</view>
		<view class="" v-show="(this.isSearch)">
			<travel :recommendList="searchList" ></travel>
			<u-empty mode="list" text="搜索数据为空" v-show="this.searchList.length == 0" marginTop="240"></u-empty>
		</view>
		<!-- 返回顶部 -->
		<view class="backTop" @click="backTop" v-show="(this.scrollTop > 300)">
			<u-icon size="40" name="arrow-upward"></u-icon>
		</view>
	</view>
	</scroll-view>
	<!-- </view> -->
	<!-- 语句提示 -->
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import travel from '../../components/travel.vue';
	import { getcategorytravel, searchtravel} from '../../api/travel.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				list: [],
				searchList: [],
				isSearch: false,
				tabList: [
				{
					name: '全部'	,
					category: ''
				},{
					name: '遗址',
					category: '遗址'
				}, {
					name: '乡村',
					category: '乡村'
				},
				{
					name: '都市',
					category: '都市'
				},
				{
					name: '公园',
					category: '公园'
				},
				{
					name: '其他',
					category: '其他'
				}],
				params: {
				  category: '',
				  pageNum: 1,
				  pageSize: 8
				},
				current: 0,
				total: '',
				searchkey: '',
				searchTotal: 0
			}
		},
		watch: {
			searchkey (data) {
				if (data === '') {
					 this.isSearch = false
					this.current = 0
					this.getList()
				} 
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '游记'
			})	
		},
		components: {
			travel
		},
		mounted() {
		  this.getList()
		},
		methods: {
			// 加载更多列表数据
			async getMore () {
				if (this.isSearch) {
					 this.getSearchMore()	
				} else {
					if (this.total > this.params.pageNum * this.params.pageSize) {
						this.params.pageNum++
						const res = await getcategorytravel(this.params)
						this.list = [...this.list,...res.data.data.data]
					} else {
						this.$refs.uToast.show({
							position: 'top',
							title: '没有更多数据了'
						})
					}
				}
			},
			// 获取数据
			async getList () {
				this.searchList = []
				this.list = []
				this.params.pageNum = 1
				const res = await getcategorytravel(this.params)
				this.list = res.data.data.data 
				this.total = res.data.data.total
			},
			// 改变scrollTop的值
			changeScrollTop (e) {
				this.scrollTop = e.detail.scrollTop
			},
			// 返回到顶部
			backTop () {
				this.scrollTop = 0
				uni.pageScrollTo({
				scrollTop: 0, //距离页面顶部的距离
				duration: 300
				});
			},
			// 选项卡改变
			tabschange (e) {
				this.params.category = this.tabList[e].category
				this.params.pageNum = 1
				this.current = e
				this.backTop()
				this.getList()
			},
			// 加载更多搜索数据
			async getSearchMore () {
				if (this.searchTotal > this.params.pageNum * this.params.pageSize) {
					this.params.pageNum++
					const res = await searchtravel({content: this.searchkey, pageNum: this.params.pageNum, pageSize: this.params.pageSize})
					this.searchList = [ ...this.searchList,...res.data.data.data,]
				} else {
					this.$refs.uToast.show({
						position: 'top',
						title: '没有更多数据了'
					})
				}
			},
			// 搜索
			async searchData () {
				this.params.pageNum = 1
				this.params.pageSize = 6
				const res = await searchtravel({content: this.searchkey, pageNum: this.params.pageNum, pageSize: this.params.pageSize})
				this.searchList = res.data.data.data
				this.searchTotal = res.data.data.total
				this.isSearch = true
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.search {
		background-color:  $theme-color;
	}
</style>
